<template>
    <div>
        <el-container>
            <el-main>
                <el-container class="parent-body">
                    <el-header class="content-header">
                        添加广告
                        <div class="return-style"><el-button icon="el-icon-arrow-left" @click.native="returnButton">返回</el-button></div>
                    </el-header>
                    <el-main class="info-main">
                        <el-row>
                            <el-col style="height: 100%;" :span="10" :offset="6">
                                <el-form ref="form" :rules="rules" :model="form" label-width="150px">
                                    <el-form-item label="广告名称：" style="position:relative;" prop="name">
                                        <el-input class="input-width" v-model="form.name"></el-input>
                                        <div style="position: absolute;bottom:-30px;font-size:12px;color:#999999;">广告名称只是作为辨别多个广告条目之用，并不显示在广告中</div>
                                    </el-form-item>
                                    <el-form-item style="position:relative;" prop="name" label="广告位置：">
                                        <el-select class="input-width" v-model="form.position" placeholder="请选择">
                                            <el-option  v-for="item in configdata" :key="item.id" :label="item.isAdrress" :value="item.isAdrress"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item prop="name" label="开始时间：">
                                        <el-date-picker
                                                v-model="form.startTime"
                                                type="date"
                                                class="input-width"
                                                placeholder="请选择时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item prop="name" label=" 到期时间：">
                                        <el-date-picker
                                                v-model="form.endTime"
                                                type="date"
                                                class="input-width"
                                                placeholder="请选择时间">
                                        </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="上线/下架：">
                                        <el-radio-group v-model="form.status">
                                            <el-radio label="1">上线</el-radio>
                                            <el-radio label="0">下架</el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                         <el-form-item prop="name" label="标题图片：">
                                    <img  :src="form.image" 
                                    class="avatar"
                                    />
                                    </el-form-item>
                                    <el-form-item prop="image" label="广告图片：">
                                        <el-upload
                                                class="upload-demo"
                                                ref="upload2"
                                                :action="imgupload"
                                                :data="form"
                                                :on-preview="handlePreview"
                                                :on-remove="handleRemove"
                                                  :on-success="handleUpload"
                                                :file-list="fileList2"
                                                :before-upload="beforeAvatarUpload"
                                                list-type="picture">
                                            <el-button style="margin-left: 10px;" size="small" icon="el-icon-upload" @click="submitUpload">选择上传文件</el-button>
                                            <div slot="tip" class="el-upload__tip">只能上传jpg/png格式文件，文件不能超过50kb</div>
                                        </el-upload>
                                    </el-form-item>
                                    <el-form-item label="广告链接：" prop="url">
                                        <el-input class="input-width" v-model="form.url"></el-input>
                                    </el-form-item>
                                    <el-form-item label="广告备注：" >
                                        <el-input class="input-width"
                                                  type="textarea"
                                                  :rows="4"
                                                  placeholder="请输入内容"
                                                  v-model="form.remarks">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm(form)">提交</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>
    </div>
</template>
<script>

import request from '@/utils/request'
import adApi from '@/api/operate/ad'
import config from '@/api/operate/config'
    export default {
        data() {
            return {

// 配置表数据
configdata:[],


                imgupload:request.defaults.baseURL+'/api-operate/ad/uploadImg',



                form:{
                    name:'',
                    position:'',
                    startTime:'',
                    endTime:'',
                   status:'',
                    image:'',
                    url:'',
                    remarks:''
                },
                rules: {
                    name: [
                        {required: true, message: '请输入分类名称', trigger: 'blur'}
                    ],
                },
                fileList2:[],
            }
        },
        methods:{
            returnButton(){
                this.$router.replace({ path: "/operation/advertising" });
            },
            submitForm(formName) {
               
               this.updateInData();
            },
            submitUpload() {
                
                this.$refs.upload2.submit();
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },

            handleUpload(file){

              let timestamp=new Date().getTime();

                  this.form.image=request.defaults.baseURL+'/api-operate'+file.data.url+'?timestamp='+timestamp;

            },
            beforeAvatarUpload(file) {
                const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
                const isLt500K = file.size /1024 < 500;
                const nameistrue=true
                if (!isJPG) {
                    this.$message.error('广告图片只能是 JPG和PNG 格式!');
                }
                if (!isLt500K) {
                    this.$message.error('广告图片大小不能超过 500K!');
                }


               
                return isJPG && isLt500K;
            },
            handlePreview(file) {
                console.log(file);
            },

           updateInData(){

                let ad={
                    id:parseInt(this.$route.query.id),
                    name:this.form.name,
                    position:this.form.position,
                    startTime:  this.parseTime(this.form.startTime),
                    endTime:this.parseTime(this.form.endTime),
                    status:this.form.status,
                    image:this.form.image,
                    url:this.form.url,
                    remarks:this.form.remarks

                };
adApi.updateList(ad).then(response=>{


this.$router.go(0);
    this.$message(response.data.message);
})

            },


                               // 时间转化
    parseTime(str) {
      if ((str + "").indexOf("-") != -1) {
        str = str.replace(new RegExp(/-/gm), "/");
      }

      let d = new Date(str);

      let newDateYear = d.getFullYear();

      let newDateMonth =
        d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;

      let newDateDay =
        d.getDate() + "" < 10 ? "0" + d.getDate() + "" : d.getDate() + "";

      return newDateYear + "-" + newDateMonth + "-" + newDateDay;
    },

// 获取基本数据
    intdata(id){

        adApi.selectOne(id).then(response=>{
console.log(response);

this.form=response.data.data

        })
    },
     // 获取配置表信息
    getConfigData(){

        config.getList().then(response=>{

            console.log(response);
            this.configdata=response.data.data;
        })
    }


        },


        created(){
var id=parseInt(this.$route.query.id);
            this.intdata(id);
                this.getConfigData();
        }
    }
</script>
<style scoped>
    .content-header{
        position: relative;
    }
    .return-style{
        position: absolute;
        right:10px;
    }
    .input-width{
        width:250px;
    }
</style>